<template>
  <a-modal
    class="step-exam-modal"
    title="创建考卷"
    :width="640"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-steps :current="currentStep" :style="{ marginBottom: '28px' }" size="small">
        <a-step title="考卷描述" />
        <a-step title="每题分数" />
        <a-step title="选择题目" />
      </a-steps>
      <a-form :form="form">
        <!-- step1 -->
        <div v-show="currentStep === 0">
          <a-form-item label="考卷名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input v-decorator="['name', { rules: [{ required: true }] }]" />
          </a-form-item>
          <a-form-item label="考卷限时" :labelCol="labelCol" :wrapperCol="wrapperCol" v-show="false">
            <a-input-number
              :min="1"
              :max="200"
              v-decorator="['elapse', { initialValue: '90', rules: [{ required: true }] }]"
            />
            分钟
          </a-form-item>
          <a-form-item label="考卷简述" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-textarea :rows="2" v-decorator="['desc', { rules: [{ required: true }] }]"></a-textarea>
          </a-form-item>
          <a-form-item label="考卷封面" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <!-- 创建考试的时候传入的图片 -->
            <div id="summernote-exam-avatar-create"></div>
          </a-form-item>
        </div>
        <div v-show="currentStep === 1">
          <a-form-item label="单选题" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input-number
              :min="1"
              :max="20"
              v-decorator="['radioScore', { initialValue: '5', rules: [{ required: true }] }]"
            />
            分
          </a-form-item>

          <a-form-item label="多选题" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input-number
              :min="1"
              :max="20"
              v-decorator="['checkScore', { initialValue: '5', rules: [{ required: true }] }]"
            />
            分
          </a-form-item>

          <a-form-item label="判断题" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input-number
              :min="1"
              :max="20"
              v-decorator="['judgeScore', { initialValue: '5', rules: [{ required: true }] }]"
            />
            分
          </a-form-item>
        </div>

        <div v-show="currentStep === 2">
          <a-radio-group
            v-model="compositionMode"
            @change="handleCompositionModeChange"
            :style="{ marginBottom: '2rem', marginLeft: '173px' }"
          >
            <a-radio value="manual"> 手动选择 </a-radio>
            <a-radio value="auto"> 题库选择 </a-radio>
          </a-radio-group>
          <template v-if="compositionMode === 'manual'">
            <a-form-item label="选择单选题" :labelCol="labelCol" :wrapperCol="wrapperCol" enterButton="Search">
              <!-- 单选 -->
              <a-select
                key="radioSelect"
                mode="multiple"
                :size="size"
                placeholder="请选择单选题"
                style="width: 100%"
                @popupScroll="popupScroll"
                @change="handleRadioChange"
              >
                <a-select-option v-for="radio in radios" :value="radio.name" :key="radio.id">
                  {{ formatSelectOptionText(radio.name) }}
                </a-select-option>
              </a-select>
            </a-form-item>

            <a-form-item label="选择多选题" :labelCol="labelCol" :wrapperCol="wrapperCol" enterButton="Search">
              <!-- 多选 -->
              <a-select
                mode="multiple"
                :size="size"
                placeholder="请选择多选题"
                style="width: 100%"
                @popupScroll="popupScroll"
                @change="handleCheckChange"
              >
                <a-select-option v-for="check in checks" :value="check.name" :key="check.id">
                  {{ formatSelectOptionText(check.name) }}
                </a-select-option>
              </a-select>
            </a-form-item>

            <a-form-item label="选择判断题" :labelCol="labelCol" :wrapperCol="wrapperCol" enterButton="Search">
              <!-- 判断 -->
              <a-select
                mode="multiple"
                :size="size"
                placeholder="请选择判断题"
                style="width: 100%"
                @popupScroll="popupScroll"
                @change="handleJudgeChange"
              >
                <a-select-option v-for="judge in judges" :value="judge.name" :key="judge.id">
                  {{ formatSelectOptionText(judge.name) }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </template>
          <template v-else-if="compositionMode === 'auto'">
            <a-form-item label="选择题库" :labelCol="labelCol" :wrapperCol="wrapperCol" enterButton="Search">
              <!-- 题库 -->
              <a-select
                key="bankSelect"
                :size="size"
                :showSearch="true"
                v-model="selectedBankId"
                placeholder="请选择组卷使用的题库"
                style="width: 100%"
                @popupScroll="popupScroll"
              >
                <a-select-option v-for="bank in banks" :key="bank.id">
                  {{ formatSelectOptionText(bank.name) }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </template>
        </div>
      </a-form>
    </a-spin>
    <template slot="footer">
      <a-button key="back" @click="backward" v-if="currentStep > 0" :style="{ float: 'left' }">上一步</a-button>
      <a-button key="cancel" @click="handleCancel">取消</a-button>
      <a-button key="forward" :loading="confirmLoading" type="primary" @click="handleNext(currentStep)">
        {{ (currentStep === 2 && '完成') || '下一步' }}
      </a-button>
    </template>
  </a-modal>
</template>

<script>
import '../../../plugins/summernote'
import $ from 'jquery'
import { getExamQuestionTypeList, examCreate } from '../../../api/exam'
import { formatTextEllipsis } from '../../../utils/util'

const stepForms = [['name', 'elapse', 'desc'], ['radioScore', 'checkScore', 'judgeScore'], ['option']]

export default {
  name: 'StepByStepExamModal',
  data() {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 },
      },
      size: 'default',
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 },
      },
      visible: false,
      confirmLoading: false,
      currentStep: 0,
      mdl: {},

      form: this.$form.createForm(this),
      // 单选题对象列表
      radios: [],
      // 多选题对象列表
      checks: [],
      // 判断题对象列表
      judges: [],
      // 手动选题或选择题库
      compositionMode: 'manual',
      banks: [],
      selectedBankId: '',
    }
  },
  updated() {
    this.initSummernote()
  },
  methods: {
    handleCompositionModeChange: function (e) {
      this.compositionMode = e.target.value
    },
    initSummernote() {
      console.log('初始化富文本插件')
      $('#summernote-exam-avatar-create').summernote({
        lang: 'zh-CN',
        placeholder: '粘贴截图到这即可，图片最好不要大于80*80',
        height: 200,
        width: 320,
        htmlMode: true,
        toolbar: [],
        fontSizes: ['8', '9', '10', '11', '12', '14', '18', '24', '36'],
        fontNames: [
          'Arial',
          'Arial Black',
          'Comic Sans MS',
          'Courier New',
          'Helvetica Neue',
          'Helvetica',
          'Impact',
          'Lucida Grande',
          'Tahoma',
          'Times New Roman',
          'Verdana',
        ],
      })
    },
    formatSelectOptionText: function (s) {
      return formatTextEllipsis(s, 23)
    },
    create() {
      this.visible = true
      // 从后端数据获取单选题、多选题和判断题的列表
      getExamQuestionTypeList()
        .then((res) => {
          console.log(res)
          if (res.code === 0) {
            console.log(res.data)
            this.radios = res.data.radios
            this.checks = res.data.checks
            this.judges = res.data.judges
          } else {
            this.$notification.error({
              message: '获取问题列表失败',
              description: res.msg,
            })
          }
        })
        .catch((err) => {
          // 失败就弹出警告消息
          this.$notification.error({
            message: '获取问题列表失败',
            description: err.message,
          })
        })
      // 从store中获取题库信息
      this.banks = this.$store.getters.queryBank
    },
    popupScroll() {
      console.log('popupScroll')
    },
    handleNext(step) {
      // 处理下一步或者完成事件
      const {
        form: { validateFields },
      } = this
      const currentStep = step + 1
      if (currentStep <= 2) {
        // stepForms
        validateFields(stepForms[this.currentStep], (errors, values) => {
          if (!errors) {
            this.currentStep = currentStep
          }
        })
        return
      }
      // last step，最后一步，代表完成考试编写，需要点击"完成"创建考试
      this.confirmLoading = true
      validateFields((errors, values) => {
        // values就是表单中校验的值，后面提交到后端接口时主要就是用这个values
        values.avatar = $('#summernote-exam-avatar-create').summernote('code')
        // 设置单选题、多选题和判断题的内容，但是提交前需要保证都已经被正确更新了
        values.radios = this.radios
        values.checks = this.checks
        values.judges = this.judges
        console.log('提交数据到后端')
        this.confirmLoading = false
        if (!errors) {
          // 在这里把创建的考试的内容(存放在values中)提交给后端接口，需要的参数都已经封装成values这个json啦
          console.log('values:', values)
          // 把data中的question属性提交到后端，待写完后端接口.把前端的创建的题型提交到后端
          examCreate(values)
            .then((res) => {
              // 成功就跳转到结果页面
              console.log(res)
              if (res.code === 0) {
                this.$notification.success({
                  message: '创建成功',
                  description: '考卷创建成功',
                })
                // 关闭弹出框
                this.visible = false
                this.$emit('ok')
              }
            })
            .catch((err) => {
              // 失败就弹出警告消息
              this.$notification.error({
                message: '考卷创建失败',
                description: err.message,
              })
            })
        } else {
          this.confirmLoading = false
        }
      })
    },
    backward() {
      this.currentStep--
    },
    handleCancel() {
      // clear form & currentStep
      this.visible = false
      this.currentStep = 0
    },
    // 改变选择的题目列表,这里需要分单选、多选和判断进行单独更新，下面的代码要针对radios、checks和judges分别适配
    handleRadioChange(values) {
      console.log(values)
      // 更新单选题的信息
      for (let i = 0; i < this.radios.length; i++) {
        // 遍历所有的题目的选项
        // 取出一个选项的id
        const name = this.radios[i].name
        // 当前问题是否被问题创建者选中
        let checked = false
        for (let j = 0; j < values.length; j++) {
          // 拿着
          const value = values[j]
          if (name === value) {
            // 说明这个问题被考试创建者选中
            checked = true
            this.radios[i].checked = true
            break // 跳出内部的for循环
          }
        }
        // 这个选项遍历到最后，发现还不是答案(不在答案数组中)，那么就把这个选项的answer属性设置为false
        if (checked === false) {
          this.radios[i].checked = false
        }
      }
    },

    // 更新多选题信息
    handleCheckChange(values) {
      console.log(values)
      // 更新单选题的信息
      for (let i = 0; i < this.checks.length; i++) {
        // 遍历所有的题目的选项
        // 取出一个选项的id
        const name = this.checks[i].name
        // 当前问题是否被问题创建者选中
        let checked = false
        for (let j = 0; j < values.length; j++) {
          // 拿着
          const value = values[j]
          if (name === value) {
            // 说明这个问题被考试创建者选中
            checked = true
            this.checks[i].checked = true
            break // 跳出内部的for循环
          }
        }
        // 这个选项遍历到最后，发现还不是答案(不在答案数组中)，那么就把这个选项的answer属性设置为false
        if (checked === false) {
          this.checks[i].checked = false
        }
      }
    },

    // 更新判断题信息
    handleJudgeChange(values) {
      console.log(values)
      // 更新单选题的信息
      for (let i = 0; i < this.judges.length; i++) {
        // 遍历所有的题目的选项
        // 取出一个选项的id
        const name = this.judges[i].name
        // 当前问题是否被问题创建者选中
        let checked = false
        for (let j = 0; j < values.length; j++) {
          // 拿着
          const value = values[j]
          if (name === value) {
            // 说明这个问题被考试创建者选中
            checked = true
            this.judges[i].checked = true
            break // 跳出内部的for循环
          }
        }
        // 这个选项遍历到最后，发现还不是答案(不在答案数组中)，那么就把这个选项的answer属性设置为false
        if (checked === false) {
          this.judges[i].checked = false
        }
      }
    },
  },
}
</script>
<style>
.step-exam-modal .ant-modal-body {
  max-height: 600px;
  overflow-y: scroll;
}
</style>